<template>
  <div>
    <el-dialog
     title="选择服务人员"
     width="600px"
     v-if="modelValue"
     append-to-body
     :visible.sync="modelValue"
    >
      <div id="selectServantDialog" class="wrapper">
        <el-form label-suffix="：">
          <el-form-item>
            <el-input
              autofocus
              suffix-icon="el-icon-search"
              v-model="keywords"
              placeholder="根据服务者的真实姓名或身份证号查询"
            ></el-input>
          </el-form-item>
        </el-form>
        <div v-if="list.length > 0" @mouseleave="itemMouseOut">
          <div
            class="items"
            v-for="(servant, index) in list"
            :key="index"
            :class="[ (list[currentServentIndex] && list[currentServentIndex].ServantID) === servant.ServantID ? 'select_servant' : '']"
            @click="click(servant)"
            @mouseenter="itemMouseEnter(index)"
          >
            <div class="avatar_box">
              <img-card :src="servant.Avatar" width="30px" height="30px" borderRadius="50%"></img-card>
            </div>
            {{servant.RealName}}
          </div>
        </div>
        <template v-else>
          <div style="text-align:center;padding:40px 0 20px">
            <svg-icon iconClass="kong" style="color:#999; font-size:60px"></svg-icon>
            <template v-if="dialogLoading">
              <p style="margin-top:10px;color:#888" v-if="keywords">正在搜索，请稍候…</p>
            </template>
            <template v-else>
              <p style="margin-top:10px;color:#888" v-if="keywords">搜索结果为空，请使用更精确的关键词</p>
              <p style="margin-top:10px;color:#888" v-else>请输入关键词搜索服务者</p>
            </template>
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DialogMixin from '@/mixins/dialog'
let filterChangeTimer = null
let IndexChangeTimer = null
export default {
  mixins: [DialogMixin],
  components: {},
  props: {
  },
  data () {
    return {
      keywords: '',
      pageNumber: 1,
      list: [],
      currentServentIndex: -1
    }
  },
  watch: {
    modelValue (val) {
      if (val) {
        this.init()
      } else {
        this.list = []
        this.currentServentIndex = -1
        this.keywords = ''
      }
    },
    keywords () {
      this.currentServentIndex = -1
      this.filterChangeEvent()
    }
  },
  computed: {
  },
  methods: {
    itemMouseEnter (index) {
      this.currentServentIndexChange(index)
    },
    itemMouseOut () {
      clearTimeout(IndexChangeTimer)
      this.currentServentIndex = -1
    },
    inpuyKeyup (e) {
      if (e.keyCode === 40) {
        e.preventDefault()
        this.currentServentIndexChange(this.currentServentIndex + 1)
      }
      if (e.keyCode === 38) {
        e.preventDefault()
        this.currentServentIndexChange(this.currentServentIndex - 1)
      }
      if (e.keyCode === 13) {
        if (this.list[this.currentServentIndex]) {
          this.click(this.list[this.currentServentIndex])
        }
      }
    },
    currentServentIndexChange (index) {
      if (this.list.length > 0) {
        if (index < 0) {
          index = this.list.length - 1
        }
        if (index >= this.list.length) {
          index = 0
        }
      } else {
        index = -1
      }
      IndexChangeTimer = setTimeout(() => {
        this.currentServentIndex = index
      }, 50)
    },
    click (servant) {
      this.$emit('change', servant)
      this.modelValue = false
    },
    filterChangeEvent (time = 200) { // 筛选项节流器
      clearTimeout(filterChangeTimer)
      this.dialogLoading = true
      filterChangeTimer = setTimeout(this.pageNumberChange(1), time)
    },
    init () {
      // this.pageNumberChange(1)
      this.$nextTick(() => {
        document.getElementById('selectServantDialog').addEventListener('keydown', this.inpuyKeyup)
      })
    },
    pageNumberChange (pageNumber) {
      this.pageNumber = pageNumber
      this.getServantListLite()
    },
    async getServantListLite () {
      this.dialogLoading = true
      const result = await this.$http.get(`/Servant/ListLite`, {
        page: this.pageNumber,
        keywords: this.keywords
      })
      this.dialogLoading = false
      if (result.Code === 100000) {
        this.list = result.Data
      } else {
        this.$message.error(result.Msg)
      }
    }
  },
  created () {},
  mounted () {}
}
</script>
<style lang="less" scoped>
.wrapper{
  .items
  {
    height: 30px;
    padding: 10px 10px;
    line-height: 30px;
    color: #333;
    .avatar_box
    {
      float: left;
      margin-right: 10px;
    }
    &.select_servant
    {
      cursor: pointer;
      background-color: #3AC7F550;
    }
  }
}
</style>
